<template>
  <view class="tab-bar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="tab-item" 
      :class="{ active: currentTab === item.pagePath }"
      @click="switchTab(item.pagePath)"
    >
      <view class="icon">
        <image :src="currentTab === item.pagePath ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
      </view>
      <view class="text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: '/pages/index/index',
      tabList: [
        {
          pagePath: '/pages/index/index',
          iconPath: '/static/images/icons/home.png',
          selectedIconPath: '/static/images/icons/home-active.png',
          text: '首页'
        },
        {
          pagePath: '/pages/cart/cart',
          iconPath: '/static/images/icons/cart.png',
          selectedIconPath: '/static/images/icons/cart-active.png',
          text: '购物车'
        },
        {
          pagePath: '/pages/my/my',
          iconPath: '/static/images/icons/my.png',
          selectedIconPath: '/static/images/icons/my-active.png',
          text: '我的'
        }
      ]
    };
  },
  created() {
    // 获取当前页面路径
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage) {
      const route = '/' + currentPage.route;
      this.currentTab = route;
    }
  },
  methods: {
    switchTab(path) {
      if (this.currentTab === path) return;
      this.currentTab = path;
      uni.switchTab({
        url: path
      });
    }
  }
};
</script>

<style lang="scss">
@import '../styles/variables.scss';

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
  z-index: 100;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    
    .icon {
      width: 48rpx;
      height: 48rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .text {
      font-size: $font-size-xs;
      margin-top: 4rpx;
      color: $text-color-secondary;
    }
    
    &.active {
      .text {
        color: $primary-color;
        font-weight: bold;
      }
    }
  }
}
</style> 